<template>
	<view>
	<view class="status_bar"></view>
	
	<view class="toumu">
		<image :src="userInfo.backGround"  style="width: 100%;height: 400rpx;" mode="aspectFill"></image>

	</view>
	
	<view class="return">
		<!-- <image src="/static/back.png" class="return"  @click="toreturn" mode="widthFix"></image> -->
		
		 <view class="edit1">
		 	<image src="../../../static/edit.png" style="width: 50rpx;height: 50rpx;margin-top: 80rpx;margin-left: 680rpx;" @click="onBackGroundImg"  class="edit1"></image>
		 </view>
	</view>
	
	<view style="margin: 20rpx;background-color: white;border-radius: 30rpx;padding: 20rpx;">
		<view style="display: flex;">


		<image style="height: 100rpx ;width: 100rpx;border-radius: 50%;flex-shrink: 0;margin-right: 30rpx;background-color:#dddddd" :src="userInfo.avatar"  mode="aspectFill" @click="onAvatar"></image>


		<view>
		<view style="display: flex;">
		<view style="font-size: 40rpx;font-weight: bold;margin-right: 20rpx;">{{userInfo.username}}</view>
		<u-icon  size="40" :name="sex"></u-icon>
		<u-icon style="  position: absolute;right:30rpx;" size="50" name="edit-pen" @click="editSign"></u-icon>
		</view>
		<view style="display: flex;padding-top: 10rpx;">
		<view style="background-color: #fff5eb;height: 50rpx;border-radius: 20rpx;padding: 10rpx;width: auto;" >{{userInfo.slogan}}</view>
		
		</view>
		</view>
		</view>
		<view style="display: flex;padding-top: 30rpx;">
		<textarea style="background-color: #fff5eb;height: 100rpx;border-radius: 20rpx;padding: 10rpx;width: 100%;" :disabled="disabled1" :value="userInfo.des" confirm-type="done" @confirm="changesign"></textarea>
		
		</view>
		
	</view>
	<view style="display: flex;background-color: white;height: auto;padding-top: 20rpx;">
	<view style="background-color: white;display: flex;flex-wrap: wrap;margin:0rpx 20rpx 20rpx 30rpx;padding: 10rpx 10rpx 20rpx 20rpx;width:auto">
						<u-tag  v-if="userInfo.school!=null" :text="userInfo.school" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;S"></u-tag>
						<u-tag v-if="userInfo.age!=null" :text="userInfo.age" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.work!=null" :text="userInfo.work" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					    <u-tag v-if="userInfo.mbti!=null" :text="userInfo.mbti" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.constellation!=null" :text="userInfo.constellation" shape="circle"  :show="show" plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby1!=null" :text="userInfo.hobby1" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby2!=null" :text="userInfo.hobby2" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby3!=null" :text="userInfo.hobby3" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					</view>
	<view style="width: 100rpx;border-radius: 30rpx;height: 50rpx;margin-top: 15rpx;padding-top:5rpx;border-color: #ffbb98;border-style:solid;text-align:center;margin-left:auto;margin-right:50rpx;"  @click="isshow=true" >+</view>				
	<!-- <u-button style="width: 100rpx;border-radius: 30rpx;height: 50rpx;margin-top: 12rpx;margin-right: 50rpx;border-color: #ffbb98;" @click="isshow=true" >+</u-button> -->
	</view>
	
<!-- 	<u-popup :show="isshow" mode="bottom" :closeable='true'  customStyle="width: 100%;height:800rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
	<view class="sign">
		悲伤
		
		</view>
		</u-popup> -->
	<!-- <view class="eidt">
		<image src="/static/eidt1.png"  @click="eidt1" mode="widthFix"></image>
	</view> -->
<!-- 	<view class="A">
		<view class="a"></view>
		<view class="name"> {{name}}</view>
		<image class="sex" src="/static/sex.png" mode="widthFix">  </image>
	
			<view class="logo">{{logo}}</view>
			<image src="../../../static/edit2.png" style="width: 50rpx;height: 50rpx;margin-top: 130rpx;position: fixed;margin-left: 650rpx;" @click="toedit2" mode=""></image>
		
		<view class="sign">{{sign}}</view>
		<image src="../../../static/edit2.png" style="width: 50rpx;height: 50rpx;margin-top: 300rpx;position: fixed;margin-left: 650rpx;" @click="toedit2" mode=""></image>
	</view> -->
<!-- 	<view class="B">
		<view class="b">
			<sign msg="郑州大学"></sign>
			<sign msg="本科在读"></sign>
			<sign msg="21岁"></sign>
		</view>
		<view class="b">
			<sign msg="ENTP"></sign>
			<sign msg="搞笑女"></sign>
		</view>
		<view class="add">
			<image src="../../../static/add1.png" @click="toadd" style="width: 60rpx;height: 60rpx;margin-left: 560rpx;margin-top: -60rpx;position: fixed;" mode=""></image>
		</view>
	</view> -->
<!-- 	<view class="C">
		照片墙
	</view>
	<view class="photos">
		<image src="/static/edit1.png" style="width: 60rpx;height: 60rpx;padding-top: 73rpx;" @click="toedit" mode=""></image>
	</view> -->
	<u-popup :show="isshow" mode="bottom" :closeable='true'  :overlayStyle="{'touch-action':'none'}" customStyle="width: 100%" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="isshow=false">
	<view class="sign">
		<view class="" style="height:70rpx;"></view>
		
		<u-form ref="uForm" label-width="auto">
			<u-form-item label="学  校:">
				<u-input v-model="userInfo.school"  @input="ifInput0"
					 input-align="left" />
			</u-form-item>
			<u-form-item label="年 龄:" right-icon="arrow-right" >
				<u-input  v-model="userInfo.age"  @input="ifInput1"
					 input-align="left" />
			</u-form-item>
			<u-form-item label="职 业:" right-icon="arrow-right">
				<u-input @click="show = true" v-model="userInfo.work"  :type="type"  @input="ifInput2"
					input-align="left" />
				
				<!-- <uni-data-select
				        v-model="value"
				        :localdata="actionSheetList"
				        @change="change" 
				      ></uni-data-select> -->
			</u-form-item>
			<view >
				<view >其他分类标签：</view>
				<view >MBTI</view>
				
				<view class="tagBox" style="display: flex;flex-wrap: wrap;">
				  <view v-for="(item, index) in lists" :key="index"  @click="onPitch(item.id,item.value)">
				    <view class="tagContant"  :class="{ tagAfter: gather.includes(item.id) }">{{ item.value }}</view>
				  </view>
				</view>
				
				
			</view>
			<u-form-item label="星   座:" right-icon="arrow-right">
				<u-input  v-model="userInfo.constellation"  @input="ifInput4"
					 input-align="left" />
			</u-form-item>
			<u-form-item label="爱好1:" right-icon="arrow-left">
				<u-input @click="show = true" v-model="userInfo.hobby1"  :type="type"  @input="ifInput5"
					input-align="left" />
			</u-form-item>
			<u-form-item label="爱好2:" right-icon="arrow-left">
				<u-input @click="show = true" v-model="userInfo.hobby2"  :type="type"  @input="ifInput6"
					input-align="left" />
			</u-form-item>
			<u-form-item label="爱好3:" right-icon="arrow-left">
				<u-input @click="show = true" v-model="userInfo.hobby3"  :type="type"  @input="ifInput7"
					input-align="left" />
			</u-form-item>
		</u-form>
		<view class="out-btn">
			<button  @click="submit" style="background-color: #fbf3d3;">确定</button>
		</view>
		
	</view>
	
		
		</u-popup>
	</view>
</template>

<script>
	export default {
		onLoad() {
			
			this.getUserInfo()
			
		},
		data() {
			return {
				userInfo:{
					
				},

				
				sex: "",
				disabled: true,
				disabled1: true,
				show: true,
				focus:false	,
				isshow:false,
				lists: [
				  { value: "INTP", id: "1" },
				  { value: "ENTP", id: "2" },
				  { value: "ENTJ", id: "3" },
				  { value: "INTJ", id: "4" },
				  {value:"ENFP",id: "5"},
				  {value:"INFP",id: "6"},
				  {value:"ENFJ",id: "7"},
				  {value:"INFJ",id: "8"},
				  {value:"ESTJ",id: "9"},
				  {value:"ISFJ",id: "10"},
				  {value:"ESFJ",id: "11"},
				  {value:"ESFP",id: "12"},
				  {value:"ISFP",id: "13"},
				 
				],
				gather: [],
				stringList: null,
				flag:false,
				};
		},
		methods:{
			// gather(val) {
			//       if(val.length >= 1 ) {
			//         this.flag = false
			//       } else {
			//         this.flag = true
			//       }
			//     },
				// 选中之后再次点击则取消选中
			ifInput0(){
				if(this.userInfo.school.trim()!==" "){
					this.ifshow0=true
				}
			},
			ifInput1(){
				if(this.userInfo.age.trim()!==" "){
					this.ifshow1=true
				}
			},
			ifInput2(){
				if(this.userInfo.work.trim()!==" "){
					this.ifshow2=true
				}
			},
			
			ifInput4(){
				if(this.userInfo.constellation.trim()!==" "){
					this.ifshow4=true
				}
			},
			ifInput5(){
				if(this.userInfo.hobby1.trim()!==" "){
					this.ifshow5=true
				}
			},
			ifInput6(){
				if(this.userInfo.hobby2.trim()!==" "){
					this.ifshow6=true
				}
			},
			ifInput7(){
				if(this.userInfo.hobby3.trim()!==" "){
					this.ifshow7=true
				}
			},
			
			onPitch(id,value) {
				
			    if (this.gather.includes(id)) {
			      this.gather.splice(this.gather.indexOf(id), 1);
				  this.flag=!this.flag
			    } else {
					if(!this.flag){
			      this.gather.push(id);
				  this.flag=true
			    }
			    this.stringList = this.gather.join(",")
			    console.log(value, "选中集合")
				this.userInfo.mbti=value
				}
				if (this.valu!==""){
					this.ifshow3=true
				}
			  },
			 
			  // onAvatar1() {
			  // 	let that = this;
			  // 	uni.chooseImage({
			  // 		count: 1,
			  // 		sizeType: ['original', 'compressed'],
			  // 		sourceType: ['album'],
			  // 		success: function(res) {
			  // 			uni.showLoading({
			  // 				mask: true,
			  // 				title: "上传图片中"
			  // 			})
			  // 			uni.uploadFile({
			  // 				url: that.$c.domain + 'oss/upload',
			  // 				filePath: res.tempFilePaths[0],
			  // 				name: 'file',
			  // 				header: {
			  // 					token: uni.getStorageSync("token")
			  // 				},
			  // 				success: (uploadFileRes) => {
			  // 					let data = JSON.parse(uploadFileRes.data)
			  // 					// if (data.code == 0) {
			  // 					// 	that.updateAvatar(data.result)
			  // 					console.log(that.userInfo.backGround)
			  // 					that.userInfo.backGround=data.url.url
			  // 						uni.hideLoading();
			  // 					}
			  				
			  // 			});
			  // 		}
			  // 	});
			  
			  // },
			  submit(){
				  this.userInfo.hobby=this.userInfo.hobby1+','+this.userInfo.hobby2+','+this.userInfo.hobby3
				  // console.log(this.userInfo.hobby)
			  	this.$H.post("user/update",this.userInfo).then(res => {
			          // console.log(res)
			  		if (res.code == 200) {
			  			uni.showToast({
			  				title:"添加成功"
			  			})
						this.isshow=false
			  		}
			  	})
			  },
			  getUserInfo() {
			  	this.$H.get("user/userInfo").then(res => {
			  		console.log(res)
			  		this.userInfo = res.result
			  		// console.log("11111111",this.userInfo)
			  		if (res.result.gender === "0") {
			  			this.userInfo.gender = 0
			  		} else if (res.result.gender === "1") {
			  			this.userInfo.gender = 1
			  		}
					this.userInfo.hobby=this.userInfo.hobby.split(",")
					this.userInfo.hobby1=this.userInfo.hobby[0]
					this.userInfo.hobby2=this.userInfo.hobby[1]
					this.userInfo.hobby3=this.userInfo.hobby[2]
			  
			  
			  	})
			  },
			toreturn(){
               uni.switchTab({
               	url:'/pages/mine/index'
               })
			},
            onBackGroundImg(){
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						uni.showLoading({
							mask: true,
							title: "上传中"
						})
						uni.uploadFile({
							url: that.$c.domain + 'oss/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync("token")
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								// if (data.codate == 0) {
								// 	that.updateAvatar(data.result)
								// console.log(that.userInfo.avatar)
								that.userInfo.backGround=data.url.url
								uni.hideLoading();
								that.$H.post("user/update",that.userInfo).then(res => {
								    console.log(res)
									if (res.code == 200) {
										uni.showToast({
											title:"修改成功"
										})
									}
								})
									
								}
							
						});
					}
				});
			},
			editSign(){
				uni.navigateTo({
					url:'/pages/mine/edit-info'
				})
			},
            getUserInfo() {
				this.$H.get("user/userInfo").then(res => {
					console.log(res)
					this.userInfo = res.result
					if(this.userInfo.gender==="0"){this.sex="man"}
					if(this.userInfo.gender==="1"){this.sex="woman"}
					
					if(this.userInfo.backGround==null){this.userInfo.backGround="/static/toumu1.png"}
					// if (res.result.gender === 1) {
					// 	this.userInfo.gender = '男'
					// } else if (res.result.gender === 2) {
					// 	this.userInfo.gender = '女'
					// } else {
					// 	this.userInfo.gender = '保密'
					// }


				})
			},
			set(){
				this.show=!this.show;
                
				},
			// onAvatar() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album'],
			// 		success: function(res) {
			// 			uni.showLoading({
			// 				mask: true,
			// 				title: "上传头像中"
			// 			})
			// 			uni.uploadFile({
			// 				url: that.$c.domain + 'oss/upload',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				header: {
			// 					token: uni.getStorageSync("token")
			// 				},
			// 				success: (uploadFileRes) => {
			// 					let data = JSON.parse(uploadFileRes.data)
			// 					// if (data.code == 0) {
			// 					// 	that.updateAvatar(data.result)
			// 					// console.log(that.userInfo.avatar)
			// 					that.userInfo.avatar=data.url.url
			// 						uni.hideLoading();
			// 					}
							
			// 			});
			// 		}
			// 	});
			
			// },
		}
	}
</script>

<style lang="scss">
	.status_bar {
		        height: var(--status-bar-height);
		        width: 100%;
		    }
	.sign{
				height: 600rpx; // 固定高度
				overflow-y: scroll; // 超出滚动
				overscroll-behavior: none; // 禁止滚动溢出
			
			}
	.bg-click{
		background:#ffbb98;
	}
		.sign{
			margin-left: 60rpx;
			margin-right: 60rpx;
		}
		.out-btn{
			margin: 40rpx auto;
			width: 180rpx;
			border-radius: 40rpx;
	
			
		}
	.return{
		position: absolute;
		width: 50rpx;
		margin-top: -180rpx;
		
	}
		.tag{
			width: auto;
			padding: 5rpx 20rpx;
			border:1px solid #ffbb98;
			border-radius: 25rpx;
			margin: 2rpx 2rpx 40rpx 40rpx;
			
		}
	.tagBox {
	  display: flex;
	  padding: 0px 8px;
	}
	
	.tagContant {
	  display: flex;
	  align-content: center;
	  justify-content: center;
	  font-size: 14px;
	  width: 60px;
	  padding: 3px 0px;
	  border: 1px solid rgb(216, 122, 62);
	  border-radius: 40rpx;
	  margin: 10px 4px;
	}
	
	.tagAfter {
	  background-color: rgb(252, 242, 233);
	  border: 1px solid rgb(216, 122, 62);
	}
	.eidt1{
		width: 10rpx;
		height: 10rpx;
		margin-left: 50rpx;
	}
	
	.A{
		display: flex;
		width: 95%;
		background-color: #ffffff;
		border-radius: 60rpx;
		height:450rpx ;
		margin: 20rpx 25rpx;
		.a{
			width: 200rpx;
			height: 200rpx;
			margin:30rpx 20rpx;
			border-radius: 50%;
			background-color: pink;
		}
		.name{
			width: auto;
		    margin:20rpx 10rpx;
			height: 50rpx;
			padding: 20rpx 20rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to right,#ebf7fd,#fff5de);
		}
		.sex{
		    width: 50rpx;
			margin: 20rpx 70rpx;
		}
		.logo{
				width: auto;
				height: 50rpx;
				padding: 20rpx 20rpx;
				border-radius: 40rpx;
				margin: 120rpx -390rpx;
				background-image: linear-gradient(to right,#ebf7fd,#fff5de);
			}
		.sign{
			width: 570rpx;
			background-image: linear-gradient(to right,#ebf7fd,#fff5de);
			height: 160rpx;
			padding: 20rpx 20rpx;
			border-radius: 40rpx;
			margin: 250rpx -140rpx;
		}
	}
	.B{
		// display: flex;
		width: 95%;
		background-color: #ffffff;
		border-radius: 60rpx;
		height:210rpx ;
		margin: 20rpx 25rpx;
		.b{
			display: flex;
		}
	}
	.C{
		margin-left: 40rpx;
		margin-top: 30rpx;
	    font-weight: 600;
	}
	.photos{
		text-align: center;
		width:205rpx;
		height: 205rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
		background-color: #e9e9e9;
	}


</style>
